﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bootstrap flow for Instagram</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="Scripts/jquery-2.0.3.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="Scripts/jquery.cookie.js"></script>
    <script src="Scripts/ig.js"></script>
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <link href="Content/bootstrap-theme.css" rel="stylesheet" />
    <link href="Content/style.css" rel="stylesheet" />
    <script type="text/javascript">
        $(document).ready(function () {
            var hash = window.location.hash;

            if (hash && hash != "") {
                var access_token = hash.split('=')[1];

                $("#list").ig({ access_token: access_token });
            } else {
                $("#list").ig();
            }
        });
    </script>
</head>
<body>
    <div id="wrap">
        <div class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">BS Flow</a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div><!--/.nav-collapse -->
            </div>
        </div>
        <div id="list" class="container">
        </div>
        <div>
            <ul class="pager">
                <li><a href="#" id="aPre">&lt;&lt;</a></li>
                <li><a href="#" id="aNext">&gt;&gt;</a></li>
            </ul>
        </div>
    </div>
    <div id="footer">
        <div class="container">
            <p class="credit">Only for Bootstrap with Instagram, maybe later for other social network flow.</p>
        </div>
    </div>
    <div class="modal fade" id="dlgFullimage">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-8" id="divFullimage"></div>
                        <div class="col-md-4">
                            <ul class="list-group"></ul>
                        </div>
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</body>
</html>
